<html>

<head>
    <meta charset="utf-8">
</head>

<body>
    性能测试：同时更新
    <button type="button" onclick="list.length=10">10</button>
    <button type="button" onclick="list.length=100">100</button>
    <button type="button" onclick="list.length=500">500</button>
    <button type="button" onclick="list.length=1000">1000</button>
    <!-- <button type="button" onclick="list.length=5000">5000</button> -->
    <!-- <button type="button" onclick="list.length=10000">10000</button> -->
    条数据，并更新 dom
    <button type="button" onclick="pause=!pause; render()">{{pause?'start':'stop'}}</button>
    <ul>
        <li each="item in list">
            {{$index}}:{{item}}
            <span if="item>0.5">{{item>0.5}}</span>
        </li>
    </ul>
    <script>
    list = [];
    list.length = 20;

    pause = false;
    </script>
    <script src="../domTpl.js"></script>
    <script>
    render = domTpl()
    render()

    var lastDate = new Date;
    t = setInterval(function() {
    	if (pause) {return}

        for (var li = 0; li < list.length; li++) {
            list[li] = Math.random()
        }

        render();

        var now = new Date;
        document.title = now - lastDate;
        lastDate = now;
    }, 1)
    </script>
</body>

</html>
